<!-- 单个日期选择器 -->

<template>
    <view class="date-picker-container">
        <!-- 日期选择区域 -->
        <view class="date-picker">
            <!-- 单个日期选择器 -->
            <picker style="display:flex; justify-content: center;align-items: center; height: 37px;width: 200px;" mode="date" :value="formatPickerValue(date)" :start="startYear" :end="endYear" fields="day"
                @change="handlePickerChange" @cancel="handlePickerCancel">
                <text>{{ date }}</text>
            </picker>
        </view>
    </view>
</template>

<script setup lang="ts">
// 导入Vue3核心API
import { ref, onMounted, watch } from 'vue';

// 定义组件发出的事件\const emit = defineEmits(['update:date']);
const emit = defineEmits(['update:date']);
// 定义组件接收的props
const props = defineProps({
    date: {
        type: String,
        default: ''
    }
})


// 响应式变量定义
const date = ref(props.date); // 日期值
const startYear = ref(''); // 日期选择器的起始年份
const endYear = ref('');   // 日期选择器的结束年份

// 监听日期变化
watch(date, (newVal) => {
    console.log(newVal);
    emit('update:date', newVal);
})

// 组件挂载时执行
onMounted(() => {
    // 获取当前年份，设置选择器的年份范围（前后10年）
    const currentYear = new Date().getFullYear();
    startYear.value = (currentYear - 10).toString();
    endYear.value = (currentYear + 10).toString();

    // 如果未传入日期，设置为当前日期
    if (!date.value) {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        date.value = `${year}-${month}-${day}`;
    }
});

// 处理选择器变化事件
const handlePickerChange = (e: any) => {
    let value = e.detail.value;
    date.value = formatDate(value);
};

// 格式化日期显示（只保留年月日格式）
const formatDate = (value: string | string[]): string => {
    // 如果是数组，先合并成字符串
    if (Array.isArray(value)) {
        value = value.join(' ');
    }

    const strValue = value.toString();
    // 只取日期部分（YYYY-MM-DD）
    return strValue.split(' ')[0];
};

// 格式化日期为选择器期望的格式
const formatPickerValue = (value: string): string => {
    // 处理空值情况
    if (!value) {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    // 确保返回YYYY-MM-DD格式
    const dateParts = value.split('-');
    if (dateParts.length === 3) {
        return `${dateParts[0]}-${dateParts[1]}-${dateParts[2]}`;
    }

    // 处理其他可能的格式
    const date = new Date(value);
    if (!isNaN(date.getTime())) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    return value;
};

// 处理选择器取消事件
const handlePickerCancel = () => {
    // 取消选择时，确保选择器下次打开时使用的是输入框的当前值
    // 通过先设置为空再恢复原值的方式，强制触发响应式更新
    const temp = date.value;
    date.value = '';  // 先设置为空值
    setTimeout(() => {
        date.value = temp;  // 延迟恢复原值，强制触发更新
    }, 0);

    console.log(`取消日期选择`);
};
</script>

<style scoped>
/* 容器样式 */
.date-picker-container {
    padding: 20rpx;
}

/* 日期选择区域样式 */
.date-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9f9e9e;
    background-color: rgb(237, 237, 237);
    border-radius: 20rpx;
    padding: 0 20rpx;
}
</style>